<template>
  <svg v-bind="$attrs" :class="svgClass" :style="{ color, width, height: width, top, left }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
  import { computed } from 'vue'
  export default {
    name: 'svgIcon',
    props: {
      name: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '1.5em'
      },
      left: {
        type: String,
        default: '0'
      },
      top: {
        type: String,
        default: '0'
      }
    },

    setup(props) {
      let iconName = computed(() => `#icon-${props.name}`)
      let svgClass = computed(() => {
        if (props.name) {
          return `svg-icon icon-${props.name}`
        } else {
          return 'svg-icon'
        }
      })
      return { iconName, svgClass }
    }
  }
</script>

<style scoped>
  .svg-icon {
    fill: currentColor;
    overflow: hidden;
    margin-left: -2px;
    position: relative;
  }
</style>
